<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   #mask{
         display: block;  position: absolute;  top:0;  left:0;  width:100%;  height:100%;  background-color:black;  z-index:800; opacity:.50; filter: alpha(opacity=70); text-align:left;display: none;
        }
   #upword{
         position:absolute;  
         width:420px;  
         height:150px;
         padding:20px,30px;
         margin-left: 277px;
         margin-top:-128px;
         background-color:yellow;  
         z-index:1200;  
         display: none; 
   }
   #upword table{
         margin-left:20px;
         margin-top:19px;
   }
   #upword table tr{
         border:none;
   }
   #upword table tr td{
         border:none;
         text-align:left;
   }
   table{
         border-collapse: collapse;
   }
   tr,th,td{
         border:1px solid black;
         text-align:center;
   }
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
   /*当点击修改按钮时让遮罩层和修改密码的界面显示*/
   function mod(e){
	   $("#mask").css("display","block");
	   $("#upword").css("display","block");
	   /*将用户编号和用户名传入到修改密码的界面*/
	   var aid=$(e).parent().parent().children().eq(0).html();
	   var aname=$(e).parent().parent().children().eq(1).html();
	   $("#msg").html("账号："+aname);
	   $("#num").val(aid);
   }
   /*当原始密码input失去焦点时异步提交到数据库检查其值是否正确*/
   $(function(){
	   $("#original").blur(function(){
		   $.post("queryApa",{aid:$("#num").val()},callback);
	   });
   });
   /*回调函数*/
   function callback(data){
	   if(data!=$("#original").val()){
		   $("#original").next("span").html("");
		   $("#original").next("span").html("<font color='red'>密码错误</font>");
		   $("#sub").attr("disabled",true);
	   }else{
		   $("#original").next("span").html("");
		   $("#sub").attr("disabled",false);
	   }
   }
   /*检查新输入的密码是否非空一致 */
   $(function(){
	   $("#new").blur(checkNew);
	   $("#ensure").blur(checkEnsure);
	   /*提交表单验证*/
	   $("#upword").submit(function(){
		   var flag=true;
		   if(!checkNew())
			   flag=false;
		   if(!checkEnsure())
			   flag=false;
		   return flag;
	   });
   });
   function checkNew(){
	   checkNull($("#new"));
   }
   function checkEnsure(){
	   var flag=false;
       if($("#ensure").val()!=$("#new").val()){
    	   $(this).next().html("<font color='red'>(两次密码不一致)</font>");
		   flag=false;
       }else{
    	   $(this).next().html("");
    	   flag=true;
       } 
       return flag;
   }
   /*检查非空 函数*/
   function checkNull($e){
	   /*此处不能写$e.val()==null,否则会出错*/
	   if($e.val()==""){
		   $e.next().html("<font color='red'>(不能为空值)</font>");
		   return false;
	   }else{
		   $e.next().html("");
		   return true;
	   }
   }
</script>
</head>
<body>
    <div id="mask"></div>
    <h2>管理员列表</h2>
    <table>
       <tr>
          <th>编号</th>
          <th>账号</th>
          <th>操作</th>
       </tr>
       <c:forEach items="${admins}" var="n">
       <tr>
          <td>${n.aid}</td>  
          <td>${n.aname}</td>  
          <td><a href="delAdmin.action?aid=${n.aid}">删除</a>|
              <a href="#" onclick="mod(this)">修改</a></td> 
       </tr>
       </c:forEach>
    </table>
    <form id="upword" name="fm" action="">
      <table>
        <tr>
          <td id="msg"></td>
        </tr>
        <tr>
          <td>
             <input  id="num" name="admin.aid" type="hidden" ><!--传输用户编号-->
                          原始密码：<input id="original" type="password" ><span></span>
          </td>
        </tr>
        <tr>
          <td>新设密码：<input id="new" name="admin.apa" type="password" ><span></span></td>
        </tr>
        <tr>
          <td>二次确认：<input id="ensure" type="password" ><span></span></td>
        </tr>
        <tr>
          <td>
             <input id="sub" type="submit" value="提交" onclick="subf()"/>
             <input  type="reset" value="重置" />
             <input id="back" type="button" value="返回" onclick="gone()"/>
          </td>
        </tr>
      </table>
    </form>
    <script type="text/javascript">
      /*提交修改密码的表单*/
      function subf(){
    	  fm.action="upAdmin"+".action";
    	  fm.submit();
    	  /*提交完成后让遮罩层和修改界面消失*/
    	  $("#mask").css("display","none");
   	      $("#upword").css("display","none");
      }
      /*提供一个返回原界面的方法*/
      function gone(){
   	      /*这种写法需要重新查询一遍跳转到原页面*/
   	      location.href="admin_queryAll";
      }
    </script>
    <h2>添加管理员</h2>
    <form name="f" method="post" >
          账号<input type="text" name="admin.aname"/><br/>
          密码<input type="password" name="admin.apa"/><br/>
         <input type="submit" value="提交" onclick="submitFrm()"/>
    </form>
    <script type="text/javascript">
      function submitFrm(){
    	  f.action="addAdmin"+".action";
    	  f.submit();
      }
    </script>
</body>
</html>